<div class="modal-body" ng-controller="ShareModalCtrl" ng-init="init()">
  <div class="modal-header">
    <h2 class="modal-header-title">
      <i class="fa fa-share-square-o"></i>
      <span class="p-l-1">{{ modalTitle }}</span>
    </h2>

    <ul class="gf-tabs">
      <li class="gf-tabs-item" ng-repeat="tab in tabs">
        <a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}">
          {{::tab.title}}
        </a>
      </li>
    </ul>

    <a class="modal-header-close" ng-click="dismiss();">
      <i class="fa fa-remove"></i>
    </a>
  </div>

  <div class="modal-content" ng-repeat="tab in tabs" ng-if="editor.index == $index">
    <div ng-include src="tab.src" class="share-modal-body"></div>
  </div>
</div>

<script type="text/ng-template" id="shareEmbed.html">
  <div class="share-modal-header">
  	<div class="share-modal-big-icon">
  		<i class="fa fa-code"></i>
  	</div>
  	<div class="share-modal-content">
  		<div ng-include src="'shareLinkOptions.html'"></div>

       <p class="share-modal-info-text">
  		下面的HTML代码可以粘贴并包含在另一个网页中。除非开启匿名访问，否则查看该页的用户需要登录到grafana才能加载图形。
       </p>

       <div class="gf-form-group gf-form--grow">
  			<div class="gf-form">
  				<textarea rows="5" data-share-panel-url class="gf-form-input" ng-model='iframeHtml'></textarea>
  			</div>
  		</div>

  	</div>
  </div>
</script>

<script type="text/ng-template" id="shareExport.html">
  <dash-export-modal dismiss="dismiss()"></dash-export-modal>
</script>

<script type="text/ng-template" id="shareLinkOptions.html">
  <div class="gf-form-group">
  	<gf-form-switch class="gf-form"
  		label="Current time range" label-class="width-12" switch-class="max-width-6"
  		checked="options.forCurrent" on-change="buildUrl()">
  	</gf-form-switch>
  	<gf-form-switch class="gf-form"
  		label="Template variables" label-class="width-12" switch-class="max-width-6"
  		checked="options.includeTemplateVars" on-change="buildUrl()">
  	</gf-form-switch>
  	<div class="gf-form">
  		<span class="gf-form-label width-12">主题</span>
  		<div class="gf-form-select-wrapper width-10">
  			<select class="gf-form-input" ng-model="options.theme" ng-options="f as f for f in ['current', 'dark', 'light']" ng-change="buildUrl()"></select>
  		</div>
  	</div>
  </div>
</script>

<script type="text/ng-template" id="shareLink.html">
  <div class="share-modal-header">
  	<div class="share-modal-big-icon">
  		<i class="gicon gicon-link"></i>
  	</div>
  	<div class="share-modal-content">
  		<p class="share-modal-info-text">
  			创建指向此仪表板或面板的直接链接，使用下面的选项进行自定义。
  		</p>
  		<div ng-include src="'shareLinkOptions.html'"></div>
  		<div>
  			<div class="gf-form-group">
  				<div class="gf-form-inline">
  					<div class="gf-form gf-form--grow">
  						<input type="text" data-share-panel-url class="gf-form-input" ng-model="shareUrl">
  					</div>
  					<div class="gf-form">
  						<button class="btn btn-inverse" clipboard-button="getShareUrl()">复制</button>
  					</div>
  				</div>
  			</div>
  		</div>
  		<div class="gf-form" ng-show="modeSharePanel">
  			<a href="{{imageUrl}}" target="_blank" aria-label="Link to rendered image"><i class="fa fa-camera"></i> 直接链接渲染图像</a>
  		</div>
  	</div>
</script>

<script type="text/ng-template" id="shareSnapshot.html">
  	<div class="ng-cloak" ng-cloak ng-controller="ShareSnapshotCtrl" ng-init="init()">
  		<div class="share-modal-header">
  			<div class="share-modal-big-icon">
  				<i ng-if="loading" class="fa fa-spinner fa-spin"></i>
  				<i ng-if="!loading" class="gicon gicon-snapshots"></i>
  			</div>
        <div class="share-modal-content">
          <div ng-if="step === 1">
            <p class="share-modal-info-text">
             快照是公开共享交互式仪表板的即时方法。创建时，我们会剥离敏感数据，如查询（度量、模板和注释）和面板链接，只保留仪表板中嵌入的可见度量数据和序列名.
            </p>
            <p class="share-modal-info-text">
              请记住，您的<strong>快照可以由拥有链接并可以访问url</strong>的任何人查看。明智地分享。
            </p>
          </div>

  				<div class="share-modal-header" ng-if="step === 3">
  					<p class="share-modal-info-text">
  						快照现在已被删除。如果您已经访问过一次，则可能需要一个小时才能将其从浏览器缓存或CDN缓存。
  					</p>
  				</div>

  				<div class="gf-form-group share-modal-options">
  					<div class="gf-form" ng-if="step === 1">
  						<span class="gf-form-label width-12">快照名称</span>
  						<input type="text" ng-model="snapshot.name" class="gf-form-input max-width-15">
  					</div>
  					<div class="gf-form" ng-if="step === 1">
  						<span class="gf-form-label width-12">到期</span>
  						<div class="gf-form-select-wrapper max-width-15">
  							<select class="gf-form-input" ng-model="snapshot.expires" ng-options="f.value as f.text for f in expireOptions"></select>
  						</div>
  					</div>

  					<div class="gf-form" ng-if="step === 2" style="margin-top: 40px">
  						<div class="gf-form-row">
  							<a href="{{snapshotUrl}}" class="large share-modal-link" target="_blank">
  								<i class="fa fa-external-link-square"></i>
  								{{snapshotUrl}}
  							</a>
  							<br>
  							<button class="btn btn-inverse" clipboard-button="getSnapshotUrl()">Copy Link</button>
  						</div>
  					</div>
  				</div>

  				<div ng-if="step === 1">
  					<p class="share-modal-info-text">
  						如果收集仪表板指标需要很长时间，则可能需要配置超时值。
  					</p>
  				</div>

  				<div class="gf-form-group share-modal-options">
  					<div class="gf-form" ng-if="step === 1">
  						<span class="gf-form-label width-12">超时 (秒)</span>
  						<input type="number" ng-model="snapshot.timeoutSeconds" class="gf-form-input max-width-15">
  					</div>
  				</div>

  				<div ng-if="step === 1" class="gf-form-button-row">
  					<button class="btn gf-form-btn width-10 btn-primary" ng-click="createSnapshot()" ng-disabled="loading">
  						本地快照
  					</button>
  					<button class="btn gf-form-btn width-16 btn-secondary" ng-if="externalEnabled" ng-click="createSnapshot(true)" ng-disabled="loading">
  						{{sharingButtonText}}
  					</button>
  					<a class="btn btn-link" ng-click="dismiss()">取消</a>
  				</div>

  				<div class="pull-right" ng-if="step === 2" style="padding: 5px">
  					你弄错了吗? <a class="pointer" ng-click="deleteSnapshot()" target="_blank">删除快照.</a>
  				</div>
  			</div>
  		</div>
  	</div>

  </div>
</script>
